<script setup lang="ts">
import { onMounted, ref } from 'vue';
// 定义事件处理函数
const handleInputChange = (e: Event) => {
  const input = e.target as HTMLInputElement;
  console.log(input.value);
};

// 使用 ref 处理原生DOM
// const input = ref<HTMLInputElement | null>(null);
// 或者取不到 undefined
// 使用 ref 处理原生DOM
const input = ref<HTMLInputElement>();
const h1 = ref<HTMLHeadingElement>();

// 组件加载完毕设置输入焦点
onMounted(() => {
  // 可选链操作符
  // input.value?.focus();
  // console.log(h1.value?.innerText);
  // 总之一个目标把 value 可能为空这个条件要处理到。
  // 1 直接判断是否为空
  // if(!input.value) return
  // input.value.focus()
  // 可选链操作符
  // input.value?.focus();
  // && 操作符
  // input.value && input.value.focus();
  // 三元操作符
  // input.value ? input.value.focus() : ''
  // 非空断言，不推荐使用
  input.value!.focus();
});
</script>

<template>
  <h1 ref="h1">App</h1>
  <input ref="input" type="text" @input="handleInputChange" />
</template>

<style scoped></style>
